<script setup lang="ts">
import { onUnmounted, Ref, ref } from "vue";
import { NSpace, NButton } from "naive-ui";
import { Instance } from "@ys-lib/ts";
import BackCard from "../../block/BackCard.vue";
import InstanceTestComponent from "../../meta/InstanceTestComponent.vue";

const i = ref(0);

Instance.Instance().set("i", i);

const ii = Instance.Instance().get("i");

const onInstanceUp = () => {
  const v = Instance.Instance().get("i") as Ref<number>;
  v.value++;
};
const onInstanceDown = () => {
  const v = Instance.Instance().get("i") as Ref<number>;
  v.value--;
};

onUnmounted(() => {
  Instance.Instance().remove("i");
});
</script>

<template>
  <BackCard>
    <div>原始数据 {{ i }}</div>
    <div>单例数据 {{ ii }}</div>
    <InstanceTestComponent />
    <NSpace :size="16">
      <NButton @click="i++">原数据+1</NButton>
      <NButton @click="i--">原数据-1</NButton>
      <NButton @click="onInstanceUp">单例+1</NButton>
      <NButton @click="onInstanceDown">单例-1</NButton>
    </NSpace>
  </BackCard>
</template>

<style scoped></style>
